<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Table, TableColumn } from '@/components/Table'
import { BaseButton } from '@/components/Button'

import { ref, unref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { getSysLogsLogin } from '@/api/user'
import IPDetailDialog from './components/ipDetailDialog.vue'
const IPDetailDialogRef = ref()

// Table
const columns: TableColumn[] = [
  {
    field: 'id',
    label: '序号',
    type: 'index',
    width: 80
  },
  {
    field: 'ip',
    label: 'IP地址'
  },
  {
    field: 'total',
    label: '设备数量',
    width: 500
  },

  {
    field: 'action',
    label: '操作',
    width: 200,
    fixed: 'right',
    slots: {
      default: ({ row }) => {
        return (
          <div class="flex justify-center items-center">
            <BaseButton class="!ml-0" type="primary" size="small" onClick={() => onOpenDialog(row)}>
              {{
                default: () => '查看'
              }}
            </BaseButton>
          </div>
        )
      }
    }
  }
]

const { tableMethods, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const { data, count } = await getSysLogsLogin({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize)
    })
    return {
      list: data,
      total: count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { refresh } = tableMethods

//Form

// 新增
const onOpenDialog = async (row) => {
  IPDetailDialogRef.value.openDialog(row)
}
</script>

<template>
  <ContentWrap title="IP限制">
    <!-- <div class="mb-4 flex justify-end">
      <BaseButton type="primary" @click="onOpenDialog">
        <template #icon>
          <Icon :size="20" icon="material-symbols:add" />
        </template>
        新增
      </BaseButton>
    </div> -->

    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      align="center"
      headerAlign="center"
      :treeProps="{ children: 'list' }"
      :pagination="{ total: total }"
      :loading="loading"
      @refresh="refresh"
    />

    <IPDetailDialog ref="IPDetailDialogRef" />
  </ContentWrap>
</template>
